<template>
	<view class="content">
		<!-- l-head -->

		<view class="l-head">
			<view class="l-search">
				<image class="l-icon-search" src="../../static/l-icon-search.png" mode=""></image>
				<input @blur="cleadSearch" v-model="serachValue" type="text" class="l-search-input" value="" placeholder="精彩热搜：金光布袋戏《羽国志异》" placeholder-class="l-holder" />
			</view>
			<button @tap="toSearch" style="background-color: #007AFF;height: 60rpx;line-height: 60rpx;font-size: 20rpx;width: 75rpx;">搜 索</button>
		</view>

		<view class="l-body">
			<view class="l-list-item" v-for="(s,i) in datas" :key="i" @tap="getClassBook(s.id)">
				<view class="l-item_view">
					<view class="l-item__value">
						<view class="l-item__value-title">
							{{s.name}}
						</view>
						<view class="l-item__value-sub">
							{{s.sum}}本
						</view>
					</view>
					<image class="l-img-classify" src="../../static/classify/l-img-classify-1.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getClassify} from "../../utils/api.js"
	export default{
		data() {
			return {
				datas:[],
				serachValue: '',
			}
		},
		onLoad() {
			getClassify((data) => {
				this.datas = data.data;
			})
		},
		methods: {
			getClassBook(id){
				uni.navigateTo({
					url: `/pages/search/search?type=2&value=`+id
				})
			},
			cleadSearch(){
				this.searchData = []
			},
			toSearch(){
				uni.navigateTo({
					url: `/pages/search/search?type=1&value=`+this.serachValue
				})
			}
		}
	}
</script>

<style>
	.l-body {
		padding: var(--pad-lr);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.l-list-item {
		width: 330rpx;
		height: 160rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #F5F7F9;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
	}

	.l-item_view {
		width: calc(100% - 64rpx);
		height: 122rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.l-item__value-title {
		font-size: var(--f-size-2);
		color: #2B3133;
		margin-bottom: 12rpx;
	}

	.l-item__value-sub {
		font-size: var(--f-size-1);
		color: #95A1A6;
	}

	.l-img-classify {
		width: 98rpx;
		height: 100%;
	}
</style>
